<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
  import echarts from 'echarts'

  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'
  import {orderFreightIndex} from "@/api/statistics";

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '300px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        chart: null
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el)
        orderFreightIndex({pageSize:6}).then(response => {
          let list = response.data;
          let path = [],dayPrice=[],weekPrice=[],monthPrice=[];
          for(let i in list){
            path.push(list[i].shipperCityName+"-"+list[i].consigneeCityName);
            dayPrice.push(list[i].dayPrice);
            weekPrice.push(list[i].weekPrice);
            monthPrice.push(list[i].monthPrice);
          }
          this.setOptions({path:path,dayPrice:dayPrice,weekPrice:weekPrice,monthPrice:monthPrice})
        })

      },
      setOptions({path, dayPrice, weekPrice, monthPrice}) {
        this.chart.setOption({
          xAxis: {
            data: path,
            boundaryGap: false,
            nameTextStyle: {},
            axisTick: {
              show: true,
              inside: true,
            },
            axisLine: {
              lineStyle: {
                color: '#E4EAECFF'
              }
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#868D9F',
                fontSize: '10',
                fontWight: '400'
              }
            }
          },
          grid: {
            left: 26,
            right: 40,
            bottom: 22,
            top: 34,
            containLabel: true
          },
          backgroundColor: '#FFFFFF',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            padding: [5, 10]
          },
          yAxis: {
            type: 'value',
            name: '当日价格',
            nameTextStyle: {
              color: "#272748FF",
              fontSize: '12',
              fontWight: '500'
            },
            axisLine: {
              lineStyle: {
                color: '#E4EAECFF',
                width: 1
              }
            },
            splitLine: {
              show: false,   // 网格线是否显示
              lineStyle: {
                color: '#ccc'   // 修改网格线颜色
              }
            },
            //  splitNumber:500,
            axisTick: {
              show: true,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#868D9F',
                fontSize: '10',
                fontWight: '400'
              }
            },
          },
          color: ['#FF7500', '#2C50F6', '#11C26D'],
          legend: {
            itemWidth: 13,
            itemHeight: 3,
            icon: 'rect',
            x: 'right', // 'center' | 'left' | {number},
            y: 'top',
            textStyle: { //图例文字的样式
                color: '#272748FF',
                fontSize: 10
            },
            padding: 10,
            itemGap: 30,
            data: ['本月', '本周', '今日']
          },
          series: [{
            name: '本月',
            type: 'line',
            itemStyle: {
              normal: {
                lineStyle: {color: '#FF7500'}
              }
            },
            data: monthPrice
          },
            {
              name: '本周',
              itemStyle: {
                normal: {
                  lineStyle: {color: '#2C50F6'}
                }
              },
              type: 'line',
              data: weekPrice
            },
            {
              name: '今日',
              itemStyle: {
                normal: {
                  lineStyle: {color: '#11C26D'}
                }
              },
              type: 'line',
              data: dayPrice
            }
          ],
        })
      }
    }
  }
</script>
<style>
  .first-title {
    position: relative;
    padding-left: 14px;
    font-size: 16px;
    line-height: 50px;
    height: 50px;
    border-bottom: none;

  i {
    margin-right: 8px;
  }

  }
  .first-title::before {
    content: '';
    height: 15px;
    width: 4px;
    background-color: #FF7F21;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

</style>
